<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">{{ data.text }}</span>
            <div class="editor-title__sub-text">最多添加 10 个导航，拖动选中的导航可对其排序</div>
        </div>
        <div class="img-btn-con" style="padding-bottom: 0">
            <div class="label-con" style="width: auto; margin-bottom: 16px">图片尺寸建议100x100像素</div>
            <!-- {{data.data.data}} -->
            <draggable v-model="data.data.data" animation="200" item-key="photo_id">
                <template #item="{ element, index }">
                    <div @mouseover="element.showClose = true" @mouseout="element.showClose = false">
                        <div style="position: relative">
                            <div class="cls-flex item-con">
								<!-- :limit="1" -->
								<el-upload
								    ref="uploadRef"
								    
								    class="better-img"
									:show-file-list="false"
								    :action="actionImgUrl()"
								    :http-request="uploadImgs"
								>
								    <div class="left-img" @click="change_img(index)">
                                    <img :src="element.url" class="left-img" v-if="element.url" />
                                    <div v-else class="cls-center left-img" style="background-color: #f6f6f6">
                                        <el-icon size="25px" color="#E1E4E7">
                                            <PictureFilled />
                                        </el-icon>
                                    </div>
                                    <div class="tip-con">{{ element.url ? "更换图片" : "添加图片" }}</div>
                                </div>
								</el-upload>
                                
                                <div class="cls-between right-box cls-column">
                                    <div class="right-one cls-flex" style="width: 100%">
                                        <el-input v-model="element.title" placeholder="建议10个字以内，可不填" clearable style="width: 252px" />
                                    </div>
                                    <div class="right-one cls-flex" style="width: 100%; flex-flow: row wrap; margin-top: 6px">
                                        <div
                                            v-if="element.link == undefined || element.link == ''"
                                            class="better-link__text"
                                            @click="page_click(element, index)"
                                        >
                                            选择链接页面<el-icon>
                                                <ArrowDown />
                                            </el-icon>
                                        </div>
                                        <template v-else>
                                            <div class="better-link__active flexs">
                                                <div class="better-link__active-info flexs">
                                                    <p class="better-link__active-name line-one">{{ element.link.urlText }}</p>
                                                    <el-icon @click.stop="element.link = ''" style="color: #4b93fa">
                                                        <CloseBold />
                                                    </el-icon>
                                                </div>
                                                <p class="better-link__text" @click="page_click(element, index)">
                                                    修改<el-icon>
                                                        <ArrowDown />
                                                    </el-icon>
                                                </p>
                                            </div>
                                            <div class="better-xcx" v-if="element.link.type === 'xcx'">
                                                <p class="line-one">小程序AppID：{{ element.link.appid }}</p>
                                                <p class="line-one" style="margin-top: 4px">小程序路径：{{ element.link.page_url }}</p>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            <div class="close-btn" :style="{ display: element.showClose ? '' : 'none' }">
                                <el-icon color="#bbb" :size="20" @click="del_click(index)">
                                    <CircleCloseFilled />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </template>
            </draggable>
			
			<el-upload v-if="data.data.data.length < 10"
			    ref="uploadRef"
			    :limit="10"
			    class="better-img"
				
				:show-file-list="false"
			    :action="actionImgUrl()"
			    :http-request="uploadImgs"
			>
			    <div class="img-btn cls-flex" v-if="data.data.data.length < 10">
			        <el-icon>
			            <Plus />
			        </el-icon>
			        <div class="cls-center" style="flex: 1">添加导航</div>
			    </div>
			</el-upload>
            
        </div>
        <div style="padding: 16px">
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">标题上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['title-top']" :min="-30" :max="30" @change="tt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['title-top']" @input="tt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">标题下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['title-bottom']" :min="0" :max="30" @change="tb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['title-bottom']" @input="tb_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="margin-right: 10px">上内边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['padding-top']" :min="0" :max="30" @change="udt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['padding-top']" @input="udt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="margin-right: 10px">下内边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['padding-bottom']" :min="0" :max="30" @change="udb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['padding-bottom']" @input="udb_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="margin-right: 10px">左右内边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['padding-left']" :min="0" :max="30" @change="lr_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['padding-left']" @input="lr_change" />
                </div>
            </div>
            <!-- <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">图片大小</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['img-size']" :max="80" @change="img_size_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['img-size']" @input="img_size_change" />
                </div>
            </div> -->
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-top']" :min="0" :max="300" @change="mtt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-top']" @input="mtt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-bottom']" :min="0" :max="300" @change="mtb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-bottom']" @input="mtb_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">页面边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-left']" :max="max" @change="padding_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-left']" @input="padding_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">圆角距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['border-radius']" :max="max" @change="radius_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['border-radius']" @input="radius_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">背景颜色</div>
                <div>
                    <el-color-picker v-model="data.style.background" @change="color_change('background', '#fff')" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con" style="flex: 1">文字颜色</div>

                <div>
                    <el-color-picker v-model="data.style.color" @change="color_change('color', '#333')" />
                </div>
            </div>
        </div>
    </div>
    <!-- 图片库 -->
    <picture-library :show="showImg" @close="showImg = false" @select="selectImg" :select_multiple="false"> </picture-library>

    <PageDialog
        :names="PageDialogIndex"
        :show="showPage"
        :show-new-list="true"
        :show-jump-xcx="true"
        @close="showPage = false"
        @names="get_names"
        @change="page_change"
    ></PageDialog>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from "vue"
import { Plus, CircleCloseFilled, PictureFilled, CloseBold, ArrowDown } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import PageDialog from "@components/PageDialog.vue"
import draggable from "vuedraggable"
import EventBus from "@common/event-bus" // EventBus事件总线，任意组件通信
import UploadImg from "@/mixins/upload-img";
const uploadRef = ref(null);
	const {
	    succList,
	    imgLoading,
	    handlePreview,
	    actionImgUrl,
	    uploadImgAssembly,
	} = UploadImg();

const { proxy } = getCurrentInstance()
const max = 30 // 最大值，适用于内外边距和圆角


onBeforeUnmount(() => {
    // 取消监听
    EventBus.off("page_dialog_objs")
})

/**
 * 图文导航
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 2,
            type_name: "swiper",
            text: "图片广告",
            state: 1, // 1是组件未拖拽调用，2是已经拖拽调用了
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
            },
        },
    },
})

/**
 * 页面列表
 */
// const pageArr = ref([])
onMounted(() => {
    // proxy.$axios
    //     .get("decorates")
    //     .then((r) => {
    //         let res = r.data
    //         if (res.code == 200) {
    //             pageArr.value = res.data.records
    //         } else {
    //             proxy.$message({ message: res.msg, type: "error" })
    //         }
    //     })
    //     .catch((err) => {})
})

const PageDialogIndex = ref("0")
const get_names = (val) => {
    PageDialogIndex.value = String(val)
}

/**
 * 页面跳转选择
 * @param {Number} imgIdx.value 数组索引
 * @param {Number} page_id 页面跳转ID
 */
const showPage = ref(false)
const page_change = (link) => {
    props.data.data.data[imgIdx.value].link = link
    props.data.data.data[imgIdx.value].page_dialog_index = PageDialogIndex.value
    showPage.value = false
    // let img = props.data.data.data[imgIdx]
    // let page_index = pageArr.value.findIndex((item) => item.decorate_id == page_id)
    // img.pageTitle = page_index > -1 ? pageArr.value[page_index].title : ""
}
const page_click = (item, index) => {
    imgIdx.value = index
    PageDialogIndex.value = item.page_dialog_index || "0"
    showPage.value = true
    EventBus.emit("page_dialog_objs", item)
}

/**
 * 选择图片
 */
const showImg = ref(false)
const clickAdd = () => {
    showImg.value = true
    imgIdx.value = -1
}
const selectImg = (val) => {
    showImg.value = false
    let imgObj = {
        url: proxy.imgUrl + val[0].photo,
        name: val[0].name,
        page_id: "",
        pageTitle: "",
    }

    if (imgIdx.value != -1) {
        props.data.data.data[imgIdx.value].url = proxy.imgUrl + val[0].photo
        props.data.data.data[imgIdx.value].name = val[0].name
        imgIdx.value = -1
    } else {
        props.data.data.data.push(imgObj)
    }
}
const del_click = (index) => {
    props.data.data.data.splice(index, 1)
}

/**
 * 要更换的图片索引
 */
const imgIdx = ref(-1)

/**
 * 更换图片
 * @param {int} index 索引
 */
const change_img = (index) => {
    // showImg.value = true
    imgIdx.value = index
}
function uploadImgs(e){
	uploadImgAssembly(e,res=>{
		
		let imgObj = {
		    url: res.url,
		    name: res.name,
		    page_id: "",
		    pageTitle: "",
		}
		
		if (imgIdx.value != -1) {
		    props.data.data.data[imgIdx.value].url = res.url
		    props.data.data.data[imgIdx.value].name = res.name
		    imgIdx.value = -1
		} else {
		    props.data.data.data.push(imgObj)
		}
	})
	
}

// 导航标题上边距
const tt_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["title-top"] = Number(val)
}
// 导航标题下边距
const tb_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["title-bottom"] = Number(val)
}
// 图片高度
// const img_size_change = (val) => {
//     props.data.rpxStyle["img-size"] = Number(val)
// }
// 页面边距
const padding_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["margin-left"] = props.data.rpxStyle["margin-right"] = Number(val)
}
// margin-bottom 变化
const mtt_change = (val) => {
    props.data.rpxStyle["margin-top"] = Number(val)
}
const mtb_change = (val) => {
    props.data.rpxStyle["margin-bottom"] = Number(val)
}

// 上内边距
const udt_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["padding-top"] = Number(val)
}
// 下内边距
const udb_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["padding-bottom"] = Number(val)
}

// 左右内边距
const lr_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["padding-left"] = props.data.rpxStyle["padding-right"] = Number(val)
}

// 圆角变化
const radius_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["border-radius"] = Number(val)
}

/**
 * 当点击清空颜色时，恢复默认颜色
 * @param {*} key 要修改的颜色字段
 * @param {*} color 默认颜色， 当key值为null时，恢复默认颜色
 */
const color_change = (key, color) => {
    if (!props.data.style[key]) {
        props.data.style[key] = color
    }
}
</script>

<style lang="less" scoped>
.better-xcx {
    width: 100%;
    flex: none;
    background-color: @gray-1;
    border-radius: @radius-xs;
    padding: @padding-xs;
    font-size: @font-size-sm;
    margin-top: 8px;
}
.better-link__text {
    line-height: @line-height-md;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #4b93fa;
    font-size: 12px;

    // width: 100%;
    .el-icon {
        margin-left: @margin-base;
    }
}

.better-link__active {
    width: 100%;
    overflow: hidden;
    color: @themes;
    font-size: @font-size-sm;

    .better-link__active-info {
        flex: 1;
        border: 1px solid @themes;
        border-radius: @radius-sm;
        background-color: #e0edff;
        padding: 2px 4px;
        margin-right: @margin-sm;
        overflow: hidden;

        .better-link__active-name {
            flex: 1;
            margin-right: @margin-xs;
        }

        .el-icon {
            flex: none;
            cursor: pointer;
        }
    }
}

.editor-head-span {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
}

.nav-text {
    color: #323232;
    padding: 7px 14px;
    border: 1px solid #ebedf0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.item-con-active {
    color: #4b93fa !important;
    background-color: #edf4ff !important;
    border: 1px solid #4b93fa;
}

.el-button + .el-button {
    margin-left: 0 !important;
}

.el-button {
    border-radius: 0 !important;
}

.img-btn {
    border: 1px solid #4b93fa;
    padding: 9px 16px;
    background: #fff;
    color: #4b93fa;
    border-radius: 2px;
    cursor: pointer;
}

.item-con {
    padding: 12px 10px;
    margin-bottom: 14px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgb(10 42 97 / 20%);

    .left-img {
        width: 60px;
        height: 60px;
        flex: none;
        cursor: pointer;
        position: relative;
    }

    .right-box {
        overflow: hidden;
        padding-left: 10px;
        min-height: 60px;

        .right-one {
            overflow: hidden;
        }
    }
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: #969799;
}

.close-btn {
    position: absolute;
    top: -0.5rem;
    cursor: pointer;
    right: -0.5rem;
}

.tip-con {
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px;
    text-align: center;
}
</style>
